<template>
    <div class="app">
        <myNavbar title="送货单详情"></myNavbar>
        <list>
            <cell>
                <div class="details_box">
                    <image class="details_box_header_bg" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
                    <div class="details_status">
                        <text class="details_status_title">{{orderForm.statusDescr}}</text>
                        <text v-if="orderForm.statusDescr =='待付款'" class="details_status_subtitle">超时30分钟未付款，订单将自动取消</text>
                        <text v-if="orderForm.statusDescr =='待发货'" class="details_status_subtitle">订单已确认，卖家会尽快安排发货</text>
                        <text v-if="orderForm.statusDescr =='待收货'" class="details_status_subtitle">卖家已发货，超时未签收系统将自动确认</text>
                        <text v-if="orderForm.statusDescr =='待评价'" class="details_status_subtitle">交易已完成，您的五星好评是最大支持</text>
                    </div>
                    <div style="padding-left: 50px">
                        <text class="orderDate" v-if="orderForm.statusDescr =='待付款' &&  timeType == false">剩{{left_time}}自动关闭</text>
                    </div>
                    <div>
                        <div class="details_information" v-if="orderLog.length !=0">
                            <div class="details_information_content" v-for="(item,index) in orderLog">
                                <div class="details_information_left">
                                    <div :class="[index == 0 ?'details_information_round_current':'details_information_round']">

                                        <text v-if="item.type==0"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']" >&#xe606;</text>
                                        <text v-if="item.type==1"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe631;</text>
                                        <text v-if="item.type==2 || item.type==7"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe66e;</text>
                                        <text v-if="item.type==3"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe69f;</text>
                                        <text v-if="item.type==4"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe6ea;</text>
                                        <text v-if="item.type==5"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe625;</text>
                                        <text v-if="item.type==6"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe614;</text>
                                        <text v-if="item.type==8"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe664;</text>
                                        <text v-if="item.type==9"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe612;</text>
                                    </div>
                                    <div v-if="index+1 != orderLog.length"
                                         :class="[index == 0?'details_information_line_current':'details_information_line']"></div>
                                </div>
                                <div class="details_information_text">
                                    <text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.content}}</text>
                                    <text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.createDate}}</text>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="details_address" v-if="orderForm.areaName !=nuderfind">
                            <div :style="{'width': (navigationType == true ? '520px':'650px')}">
                                <div class="details_address_top">
                                    <text class="details_address_name">{{orderForm.consignee}}</text>
                                    <text class="details_address_phone" @click="phoneClick(orderForm.phone)">{{orderForm.phone}}</text>
                                    <div class="details_lines" v-if="!checkPermission(['member-list'])"></div>
                                    <text class="details_right_copy" @click="copyAddressClick">复制</text>
                                    <div class="details_lines" v-if="checkPermission(['member-list'])"></div>
                                    <text class="details_right_copyTwo" v-if="checkPermission(['member-list'])" @click="memberClick">详情</text>
                                </div>
                                <text class="details_stores_title" v-if="orderForm.shippingMethod == 1">自提点：{{shopName}}</text>
                                <div class="details_address_bottom">
                                    <text :style="{'width': (navigationType == true ? '520px':'650px')}" class="details_address_title">{{orderForm.address}}</text>
                                </div>
                            </div>
                            <div class="detaisl_botton_color_boxTwo botton_Bg_Color" @click="navigationClick" v-if="navigationType == true">
                                <text class="details_botton_color_box_title botton_Fz_Color">导航至</text>
                            </div>
                        </div>
                    </div>

                    <div class="details_order">
                        <div class="details_order_item" v-for="item in itemList">
                            <div class="details_order_item_img">
                                <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                            </div>
                            <div class="details_order_item_content">
                                <div class="details_order_item_content_top">
                                    <text class="details_order_item_title">{{item.name}}</text>
                                    <div style="display: flex;flex-direction: row">
                                        <text class="details_order_red_icon">¥</text>
                                        <text class="details_order_red_font">{{item.price | price}}</text>
                                    </div>
                                </div>
                                <div class="details_order_item_content_bottom">
                                    <text class="details_order_item_subtitle">{{item.spec}}</text>
                                    <text class="details_order_item_number" style="opacity: 0.5;"> x {{item.quantity | number}}</text>
                                </div>
								<div class="details_order_item_content_bottom"  v-if="item.subType==4&&(orderForm.shippingStatus==4||orderForm.shippingStatus==3)&&item.emptyBarrelQuantity!=null">
								    <text class="details_order_item_subtitle">回桶数</text>
								    <text class="details_order_item_number" style="color: rgba(231, 91, 83, 1);"> x {{item.emptyBarrelQuantity | number}}</text>
								</div>
                            </div>
                        </div>
                        <div class="details_order_item_bottom">
                            <div class="row_sb_mg20">
                                <text class="details_order_item_bottom_titel">商品总价</text>
                                <div style="display: flex;flex-direction: row">
                                    <text class="details_order_black_icon">¥</text>
                                    <text class="details_order_black_font">{{orderForm.subPrice}}</text>
                                </div>
                            </div>
                            <div class="row_sb_mg20">
                                <text class="details_order_item_bottom_titel">运费：</text>
                                <div style="display: flex;flex-direction: row">
                                    <text class="details_order_black_icon" v-if="orderForm.shippingFreight != 0">¥</text>
                                    <text class="details_order_black_font">{{orderForm.shippingFreight == 0 ?'免费':orderForm.shippingFreight}}</text>
                                </div>
                            </div>
                            <div class="row_sb_mg20" v-if="orderForm.levelFreight != 0">
                                <text class="details_order_item_bottom_titel">楼层费：</text>
                                <div style="display: flex;flex-direction: row">
                                    <text class="details_order_black_icon">¥</text>
                                    <text class="details_order_black_font">{{orderForm.levelFreight}}</text>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="submit_payMethod" v-if="payments.length != 0">
                            <div class="submit_payMethod_Header">
                                <text class="submit_payMethod_Header_Title">支付方式</text>
                            </div>
                            <div class="submit_payMethod_Content" v-for="item in payments">
                                <div class="submit_payMethod_Content_Column">
                                    <text class="submit_payMethod_Content_Title">{{item.paymentPluginName}}</text>
									<text style="margin-left:10px" class="submit_payMethod_Content_Date" v-if="item.attach.quantity !=underfind && (item.paymentPluginId == 'waterTicketPayPlugin' || item.paymentPluginId == 'couponCodePayPlugin')">(抵扣{{item.attach.quantity}}张)</text>

                                </div>
                                <text class="submit_payMethod_Content_SubTitle">¥{{item.amount | price}}</text>
                            </div>
                        </div>
                    </div>
                    <div class="details_order_information">
                        <div class="details_information_row">
                            <text class="details_information_row_title">送货单号</text>
                            <text class="details_information_row_content">{{orderForm.sn}}</text>
                            <div class="details_information_row_line"></div>
                            <text class="details_information_row_botton" @click="copyClick">复制</text>
                        </div>
                        <div class="details_information_row">
                            <text class="details_information_row_title">订单编号</text>
                            <text class="details_information_row_content">{{orderForm.orderSn}}</text>
                        </div>
                        <div class="details_information_row">
                            <text class="details_information_row_title">下单时间</text>
                            <text class="details_information_row_content">{{orderForm.createDate}}</text>
                        </div>
                        <div class="details_information_row">
                            <text class="details_information_row_title">送货时间</text>
                            <text class="details_information_row_content">{{orderForm.orderDate}}</text>
                        </div>
                        <div class="details_information_row">
                            <text class="details_information_row_title">配送方式</text>
                            <text class="details_information_row_content">{{orderForm.shippingMethod == 0 ?'普通快递':orderForm.shippingMethod == 1?'门店自提':'同城配送'}}</text>
                        </div>
                        <div class="details_information_row" v-if="orderForm.memo != null">
                            <text class="details_information_row_title">订单备注</text>
                            <text class="details_information_row_contentTwo">{{orderForm.memo}}</text>
                        </div>
                    </div>
                    <div style="width:100%;height:100px;"></div>
                    <div v-if="orderForm.shippingMethod == 2">
                        <!-- 待配送 -->
                        <div class="details_botton" v-if="orderForm.shippingStatus == 1">
                            <div class="detaisl_botton_color_box botton_Bg_Color" @click="cancelClick">
                                <text class="details_botton_color_box_title botton_Fz_Color">关闭</text>
                            </div>
							<div class="detaisl_botton_color_box botton_Bg_Color" @click="shipping">
							    <text class="details_botton_color_box_title botton_Fz_Color">派单</text>
							</div>
                        </div>
                        <!-- 配送中 -->
                        <div class="details_botton" v-if="orderForm.shippingStatus == 2">
                            <div class="detaisl_botton_color_box botton_Bg_Color" @click="cancelClick">
                                <text class="details_botton_color_box_title botton_Fz_Color">关闭</text>
                            </div>
							<div class="detaisl_botton_color_box botton_Bg_Color" @click="rejectedClick">
							    <text class="details_botton_color_box_title botton_Fz_Color">驳回</text>
							</div>
							<div class="detaisl_botton_color_box botton_Bg_Color" @click="shipping">
							    <text class="details_botton_color_box_title botton_Fz_Color">送达</text>
							</div>
                        </div>
                        <!--                     已送达-->
                        <div class="details_botton" v-if="orderForm.shippingStatus == 3">
                            <div class="detaisl_botton_color_box botton_Bg_Color" @click="shipping">
                                <text class="details_botton_color_box_title botton_Fz_Color">核销</text>
                            </div>
                        </div>
                    </div>
                    <div v-if="orderForm.shippingMethod == 0">
                        <!-- 待发货 -->
                        <div class="details_botton" v-if="orderForm.shippingStatus == 1">
							<div class="detaisl_botton_color_box botton_Bg_Color" @click="cancelClick">
							    <text class="details_botton_color_box_title botton_Fz_Color">关闭</text>
							</div>
                            <div class="detaisl_botton_color_box botton_Bg_Color" @click="shipping">
                                <text class="details_botton_color_box_title botton_Fz_Color">发货</text>
                            </div>
                        </div>
                        <!-- 已发货 -->
                        <div class="details_botton" v-if="orderForm.shippingStatus == 2 || orderForm.shippingStatus == 3">
                            <div class="detaisl_botton_color_box botton_Bg_Color" @click="shipping">
                                <text class="details_botton_color_box_title botton_Fz_Color">修改单号</text>
                            </div>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>

<script>
    const amap = app.requireModule('eeui/amap');
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    import myNavbar from '../../components/myNavbar/myNavbar.vue'
    import {
        find,reject,cancel
    } from '../../api/shipping';
    import {find as orderFind} from '../../api/order'
    const eeui = app.requireModule('eeui');
    const pay = app.requireModule("eeui/pay");
    const geolocation = app.requireModule("eeui/geolocation");
    const communication = app.requireModule("eeui/communication");
    export default {
        data() {
            return {
                img: 'https://icweiliimg1.pstatp.com/weili/l/540018848208912837.webp',
                orderForm: {},
                orderFormFind:{},
                id: '',
                orderLog: '',
                currentTab: 0,
                payments: [],
                left_time: "00:00",
                timeType: false,
                itemList: [],
                timer: null,
                navigationType:false,
                shopName:''
            }
        },
        created() {
            this.initIconFont()
            this.id = app.config.params
        },
        components:{
            myNavbar
        },
        filters:{
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value){
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        mounted() {
            this.findClick(this.id)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        methods: {
            findClick(data) {
                var _this = this
                find(data).then(
                    res => {
                        if (res.type == 'success') {
                            console.log(res)
                            _this.orderForm = res.data.shipping
                            _this.orderFindClick(res.data.shipping.orderId)
							console.log( _this.orderForm )
                            _this.orderForm.createDate = _this.formatTime(_this.orderForm.createDate)
                            _this.orderForm.orderDate = _this.currentDate(_this.orderForm.orderDate)
                            if (!this.isEmptyString(res.data.orderLog)) {
                                res.data.orderLog.forEach(function (item) {
                                    item.createDate = _this.formatTime(item.createDate)
                                })
                                _this.orderLog = res.data.orderLog
                            }
                            _this.orderForm.itemList.forEach(function (item) {
                                if (item.thumbnail != undefined){
                                    item.thumbnail = _this.thumbnail(item.thumbnail, 170, 170)
                                }
                            })
                            _this.itemList = _this.orderForm.itemList
							res.data.payments.forEach(item=>{
								item.attach=JSON.parse(item.attach)
							})
                            _this.payments = res.data.payments;
                            _this.shopName = res.data.shopName
                        }
                    }
                ).catch(error => {
                })
            },
            copyClick() {
                eeui.copyText(this.orderForm.sn)
                eeui.toast('复制成功')
            },
            shipping(){
				if(this.orderForm.shippingStatus == 1&&this.orderForm.shippingMethod == 2){
					if(this.checkPermission(['shipping.dispatch'])==false){
						eeui.alert('您没有派单权限', function() {

						});
                        return
					}

				}else if(this.orderForm.shippingStatus == 2&&this.orderForm.shippingMethod == 2){
					if(this.checkPermission(['shipping.received'])==false){
						eeui.alert('您没有送达权限', function() {

						});
                        return
					}

				}else if(this.orderForm.shippingStatus == 3&&this.orderForm.shippingMethod == 2){
					if(this.checkPermission(['shipping.received'])==false){
						eeui.alert('您没有签收权限', function() {

						});
                        return
					}

				}else if(this.orderForm.shippingStatus == 1&&this.orderForm.shippingMethod == 0){

					if(this.checkPermission(['shipping.shipped'])==false){
						eeui.alert('您没有发货权限', function() {

						});
                        return
					}

				}else if((this.orderForm.shippingStatus == 2||this.orderForm.shippingStatus == 3)&&this.orderForm.shippingMethod == 0){
					if(this.checkPermission(['shipping.shipped'])==false){
						eeui.alert('您没有修改单号权限', function() {

						});
                        return
					}

				}

                var _this = this
                eeui.openPage({
                    url: 'root://pages/order/button/distribution.js',
                    params: _this.orderForm.id,
                    statusBarType: 'immersion',
                    statusBarStyle: false
                },result => {
                    if (result.status == 'stop')  {
                        storage.getItem('distribution', event => {
                            if (event.data == 'true'){
                                this.findClick(this.id)
                            }
                        })
                    }
                })
            },
            rejectedClick(){
                var _this = this
                eeui.confirm({
                    title: "温馨提示",
                    message: "你确定驳回吗？",
                    buttons: ["取消", "确定"]
                }, function(result) {
                    if (result.status == "click" && result.title == "确定") {
                        if(_this.checkPermission(['shipping.reject'])==false){
                            eeui.alert('您没有驳回权限', function() {

                            });
                            return
                        }
                        reject(this.id).then(
                            res => {
                                eeui.toast(res.content)
                                _this.findClick(this.id)
                                storage.setItem('distribution', 'true', event => {

                                })
                            }
                        ).catch(error => {

                        })
                    }
                });

            },
            copyAddressClick(){
                eeui.toast('复制成功')
                eeui.copyText(this.orderForm.consignee + this.orderForm.phone + this.orderForm.address)
            },
            memberClick(){
                var _this = this
                eeui.openPage({
                    url: 'root://pages/member/memberInfo/memberInfo.js',
                    params: _this.orderForm.memberId,
                    statusBarType: 'immersion',
                    statusBarStyle: false
                },result => {

                })
            },
            cancelClick(){
                var _this = this
                eeui.confirm({
                    title: "温馨提示",
                    message: "你确定关闭吗？",
                    buttons: ["取消", "确定"]
                }, function(result) {
                    if (result.status == "click" && result.title == "确定") {
                        if(_this.checkPermission(['shipping.cancel'])==false){
                            eeui.alert('您没有关闭权限', function() {

                            });
                            return
                        }
                        cancel(_this.id).then(
                            res => {
                                eeui.toast(res.content)
                                _this.findClick(this.id)
                                storage.setItem('distribution', 'true', event => {

                                })
                            }
                        ).catch(error => {
                            console.log(error)
                        })
                    }
                });
            },
            navigationClick(){
                var _this = this
                var lat = _this.orderFormFind.lat
                var lng = _this.orderFormFind.lng
                var data = {
                    dlat :lat,
                    dlon :lng,
                };
                amap.startNaviGao(data,function (res) {
                    console.log(res)
                    eeui.toast(res.content)
                })
            },
            orderFindClick(data) {
                var _this = this
                orderFind(data).then(
                    res => {
                        console.log(res)
                        if (res.type == 'success') {
                            _this.orderFormFind = res.data.order
                            if (!_this.isNull(_this.orderFormFind.lat) && !_this.isNull(_this.orderFormFind.lng) && _this.orderFormFind.lat != 0 && _this.orderFormFind.lng != 0) {
                                _this.navigationType = true
                            }else {
                                _this.navigationType = false
                                return

                            }
                            console.log(_this.orderFormFind.lat)
                            console.log(_this.orderFormFind.lng)
                        }
                    }
                ).catch(error => {
                })
            },
            phoneClick(data){
                communication.call(data)
            },
        }
    }
</script>
<style lang="css" src="../../style/wx.css"/>
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .details_box_header_bg {
        width: 750px;
        height: 560px;
        background-image: linear-gradient(to bottom, rgba(194, 194, 194,0.8), rgba(248, 248, 248, 1));
        position: absolute;
        top: 0;
    }

    .details_status {
        padding-left: 30px;
        padding-right: 50px;
        box-sizing: border-box;
        z-index: 0;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .details_status_title {
        font-size: 44px;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        /*line-height: 56px;*/
    }
	.submit_payMethod_Content_Date {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 0.3);
	  line-height: 36px;
	  /* display: block; */
	  /* margin-top: 10rpx; */
	}
    .details_status_subtitle {
        font-size: 24px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        margin-left: 25px;
        margin-bottom: 2px;
    }


    .title2 {
        color: gray;
        font-size: 36px;
        font-family: iconfont2;
        margin: 0 20px;
        color: #cccccc;
    }
    .details_address {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 25px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
        box-sizing: border-box;
        position: relative;
    }

    .navigation_box{
        /*position: absolute;*/
        /*right: 20px;*/
        /*top: 20px;*/
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;

    }

    .details_address_top {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_name {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
    }

    .details_address_phone {
        font-size: 28px;
        font-weight: 500;
        color: #409EFF;
        margin-left: 10px;

    }

    .details_address_bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        /*margin-left: 12px;*/
    }

    .details_address_label {
        /*width: 66px;*/
        /*height: 34px;*/
        border-style: solid;
        border-width: 2px;
        border-color: rgba(235, 89, 79, 1);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_address_label_box {
        width: 66px;
        height: 34px;
        background-color: rgba(235, 89, 79, 1);
        border-style: solid;
        border-width: 1px;
        border-color: white;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .details_address_label_title {
        font-size: 18px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .details_order {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding-top: 40px;
        padding-bottom: 10px;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }

    .details_order_item {
        display: flex;
        flex-direction: row;
        margin-bottom: 40px;
    }

    .details_order_item_img {
        width: 170px;
        height: 170px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .details_order_item_content {
        display: flex;
        flex-direction: column;
        width: 460px;
        margin-left: 20px;
        position: relative;
    }

    .details_order_item_content_top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }

    .details_order_item_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        text-overflow: ellipsis;
        lines: 1;
        width: 370px;
    }


    .details_order_item_content_bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .details_order_item_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        lines:2;
        text-overflow: ellipsis;
        width: 370px;
    }

    .details_order_item_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        /*  */
    }

    .details_order_item_bottom {
        padding-top: 40px;
        border-top-color: rgba(232, 234, 237, 1);
        border-top-width: 1px;
        border-top-style: solid;
    }

    .row_sb_mg20 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .details_order_item_bottom_titel {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }


    .details_order_item_bottom_totalTitel {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }


    .details_order_red_icon {
        font-size: 20px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_red_font {
        font-size: 28px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_black_icon {
        font-size: 20px;
        font-weight: 500;
        color: black;
        line-height: 42px;
    }

    .details_order_black_font {
        font-size: 22px;
        font-weight: 500;
        color: black;
        line-height: 42px;
    }

    .details_order_information {
        width: 700px;
        padding: 40px 25px 10px 25px;
        border-radius: 16px;
        background-color: white;
        box-sizing: border-box;
        margin-left: 25px;
        margin-top: 20px;
        margin-bottom: 30px;
    }


    .details_information {
        width: 700px;
        margin-left: 25px;
        background-color: white;
        border-radius: 16px;
        margin-top: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: content-box;
    }

    .details_information_title {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_information_title_current {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.8;
    }

    .details_information_left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .details_information_line {
        width: 1px;
        height: 50px;
        box-sizing: border-box;
        border-left-width: 2px;
        border-left-style: solid;
        border-left-color: rgba(0, 0, 0, 0.2);
    }

    .details_information_line_current {
        width: 1px;
        height: 50px;
        border-left-color: rgba(237, 86, 75, 0.719);
        border-left-style: dashed;
        border-left-width: 2px;
        box-sizing: border-box;
    }

    .details_information_round {
        width: 50px;
        height: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_information_round_current {
        width: 50px;
        height: 50px;
        background-image: linear-gradient(129deg, rgba(237, 86, 75, 0.719), rgb(247, 150, 120));
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_information_icon {
        font-family: iconfont2;
        font-size: 20px;

        color: rgba(0, 0, 0, 0.5);
    }

    .details_information_icon_current {

        font-family: iconfont2;
        font-size: 20px;
        color: white;
    }

    .details_information_content {
        display: flex;
        flex-direction: row;
    }

    .details_information_text {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        padding-top: 10px;
    }

    .details_information_row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 30px;

    }

    .details_information_row_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        margin-right: 40px;
    }

    .details_information_row_content {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .details_information_row_contentTwo{
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        width: 520px;
    }

    .details_information_row_botton {
        font-size: 24px;
        font-weight: 400;
        color: rgba(103, 130, 192, 1);
    }

    .details_information_row_line {
        width: 1px;
        height: 24px;
        background-color: rgba(232, 234, 237, 1);
        margin-left: 20px;
        margin-right: 20px;
    }

    .submit_payMethod {
        width: 700px;
        padding: 40px 25px 40px 25px;
        box-sizing: border-box;
        margin-left: 25px;
        margin-top: 30px;
        background-color: white;
        border-radius: 16px;
    }

    .submit_payMethod_Header_Title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .submit_payMethod_Content {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
    }

    .submit_payMethod_Content_Column {
        display: flex;
        flex-direction: row;
    }

    .submit_payMethod_Content_Title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        /* display: block; */
    }

    .submit_payMethod_Content_SubTitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(231, 91, 83, 1);
        display: block;
    }

    .orderDate {
        display: block;
        margin-top: 20px;
        color: white;
        font-size: 30px;
        letter-spacing: 2px
    }
    .details_botton {
        width: 750px;
        height: 94px;
        background-color: rgba(255, 255, 255, 1);
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        position: fixed;
        bottom: 0;
    }

    .detaisl_botton_color_box {
        width: 160px;
        height: 56px;
        opacity: 0.8;
        border-radius: 4px;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .detaisl_botton_color_boxTwo {
        width: 100px;
        height: 50px;
        opacity: 0.8;
        border-radius: 4px;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_botton_color_box_title {
        font-size: 24px;
        font-weight: 400;
        line-height: 56px;
    }
    .details_lines{
        width: 2px;
        height: 28px;
        background-color: rgba(0,0,0,0.2);
        margin-left: 20px;
    }
    .details_right_copy{
        font-size: 28px;
        color: red;
        margin-left: 20px;
    }
    .details_right_copyTwo{
        font-size: 28px;
        color: rgba(0,0,0,0.4);
        margin-left: 20px;
    }
    .details_stores_title{
        font-size: 28px;
        color: red;
        margin-bottom: 10px;
        width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
